import React, { Component } from 'react';
class App5 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            num:0
        }
    }
    render() { 
        const {num}=this.state;
        return (
            <>
            <div>父组件</div>
            <hr/>
            <button onClick={(ev)=>{this.add(0,ev)}}>{num}</button>
            <hr/>
            <Child
            pnum={num}
            padd={this.add}
            />
            </>
        );
    }
    add=(...arg)=>{
    //事件函数中的第一个参数，如果不是默认的ev,但是又要使用ev，那么触发事件的时候需要手动传递
    if(typeof arg === 'number'){
        this.setState({num:arg});
        return ;
    }
    this.setState({
        num:++this.state.num
    })
    }
}


// class类组件有this
class Child extends Component{
    constructor (props){
        super(props);
            this.state={
                num:this.props.pnum
            }
    }
    render(){//computed
        const {pnum}=this.props;
        const {num}=this.state;
        return(
            <>
            <h2>子组件</h2>
            {/* 父子变化 */}
            <button onClick={this.cadd}>{pnum}</button>
            <hr/>
            {/* 单个变化 */}
            <button onClick={this.add}>{num}</button>
            <hr/>
            <button onClick={this.merge}>一致的数据</button>
            </>
        )
    }

    cadd=()=>{
        this.props.padd();
    }

    add=()=>{
        this.setState({num:++this.state.num});
    }
    merge = (ev) => {
        this.props.padd(ev,this.state.pnum);
    }
}
 
export default App5;